<template>
    <div class="recruit-body" v-loading="dataLoading">
        <!-- 顶部搜索框与按钮 -->
        <div class="form-box">
            <el-form style="margin-top: 30px;">
                <el-col :span="8">
                    <el-form-item label="职位名称: ">
                        <el-input v-model="hrInfo.jobName" placeholder="请输入职位名称" style="width: 240px;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="HR名称: ">
                        <el-input v-model="hrInfo.username" placeholder="请输入人事名称" style="width: 240px;" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button @click="resetQueryHandle">重置</el-button>
                    <el-button type="success" @click="recruitListQueryHandle">查询</el-button>
                    <el-button type="primary" @click="openAddBoxHandle">发布职位</el-button>
                </el-col>
            </el-form>
        </div>
        <!-- 表格 -->
        <div class="table-box">
            <el-table :data="recruitList" stripe style="width: 100%">
                <el-table-column prop="hrDO.hrName" label="发布Hr" align="center" width="80">
                </el-table-column>
                <el-table-column prop="jobDO.jobName" label="职位名称" align="center" width="180">
                </el-table-column>
                <el-table-column prop="startSalary" label="起始薪资" align="center" width="100">
                </el-table-column>
                <el-table-column prop="maxSalary" label="最高薪资" align="center" width="100">
                </el-table-column>
                <el-table-column prop="payMethod" label="薪资结算方式" align="center" width="120">
                    <template slot-scope="scope">
                        {{ payMethods[scope.row.payMethod] }}
                    </template>
                </el-table-column>
                <el-table-column prop="recruitDetail" label="招聘详情" align="center" width="180">
                </el-table-column>
                <el-table-column prop="skillRequest" label="任职要求" align="center" width="180">
                </el-table-column>
                <el-table-column prop="welfareInfo" label="福利待遇" align="center" width="180">
                </el-table-column>
                <el-table-column prop="createTime" label="发布时间" align="center" width="180">
                </el-table-column>
                <el-table-column prop="visitCount" label="浏览量" align="center" width="80">
                </el-table-column>
                <el-table-column prop="status" label="审核状态" align="center" width="100">
                    <template slot-scope="scope">
                        <template v-if="scope.row.status == 0">审核中</template>
                        <template v-else-if="scope.row.status == 1">已通过</template>
                        <template v-else>未通过</template>
                    </template>

                </el-table-column>
                <el-table-column label="操作" align="center" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="openUpdateBoxHandle(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="deleteRecruit(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="page-box">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="hrInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="hrInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 新增招聘信息的弹窗 -->
        <el-dialog title="新增职位" :visible.sync="addRecruitBox" center :show-close="false">

            <el-form :inline="true" :model="formData" class="demo-ruleForm">

                <el-form-item label="职位名称:" prop="recruitName" :required="true">
                    <el-input v-model="formData.recruitName" style="width: 240px;" placeholder="请输入职位名称"></el-input>
                </el-form-item>

                <el-form-item label="薪资结算方式:" prop="payMethod" :required="true">
                    <el-select v-model="formData.payMethod" placeholder="请选择薪资结算方式" style="width: 212px;">
                        <el-option v-for="(item, index) in payMethods" :key="index" :label="item"
                            :value="index"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="职位类型:" prop="jobType" :required="true">
                    <el-select v-model="formData.jobType" style="width: 240px;" @change="specificJobQueryHandle">
                        <el-option v-for="item in jobTypeList" :key="item.typeId" :label="item.typeName"
                            :value="item.typeId"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="具体职位:" prop="specificJob" :required="true">
                    <el-select :disabled="jobList == null" v-model="formData.jobId" style="width: 240px;">
                        <el-option v-for="item in jobList" :key="item.jobId" :label="item.jobName"
                            :value="item.jobId"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="薪资范围选项:" prop="salaryRange" :required="true">
                    <el-radio-group v-model="formData.salaryRange" @change="salaryRangeChangeHandle">
                        <el-radio :label="1">薪资范围</el-radio>
                        <el-radio :label="2">起始薪资</el-radio>
                        <el-radio :label="3">最高薪资</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="起始薪资:" prop="startSalary">
                    <el-input :disabled="formData.salaryRange == 3" v-model="formData.startSalary" style="width: 250px;"
                        placeholder="请输入起始薪资"></el-input>
                </el-form-item>

                <el-form-item label="最高薪资:" prop="maxSalary">
                    <el-input :disabled="formData.salaryRange == 2" v-model="formData.maxSalary" style="width: 250px;"
                        placeholder="请输入最高薪资"></el-input>
                </el-form-item>

                <el-form-item label="任职要求:" prop="skillRequest" :required="true">
                    <el-input type="textarea" style="width: 240px;" v-model="formData.skillRequest"
                        :autosize="{ minRows: 1 }" placeholder="请输入任职要求"></el-input>
                </el-form-item>

                <el-form-item label="职位详情:" prop="recruitDetail" :required="true">
                    <el-input type="textarea" style="width: 240px;" v-model="formData.recruitDetail"
                        :autosize="{ minRows: 1 }" placeholder="请输入职位详情"></el-input>
                </el-form-item>

                <el-form-item label="福利待遇:" prop="welfareInfo" :required="true">
                    <el-input type="textarea" style="width: 240px;" v-model="formData.welfareInfo"
                        :autosize="{ minRows: 1 }" placeholder="请输入福利待遇"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelAddHandle">取 消</el-button>
                <el-button @click="checkResetHandle">重 置</el-button>
                <el-button type="primary" @click="checkFormDataHandle">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改招聘信息的弹窗 -->
        <el-dialog title="修改职位" :visible.sync="updateRecruitBox" center :show-close="false">
            <el-form :inline="true" :model="updateData" class="demo-ruleForm">
                <el-form-item label="职位名称:" prop="recruitName">
                    <el-input v-model="updateData.recruitName" style="width: 250px;" placeholder="请输入职位名称"></el-input>
                </el-form-item>

                <el-form-item label="薪资结算方式:" prop="payMethod">
                    <el-select v-model="updateData.payMethod" placeholder="请选择薪资结算方式" style="width: 222px;">
                        <el-option v-for="(item, index) in payMethods" :key="index" :label="item"
                            :value="index"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="职位类型:" prop="jobType">
                    <el-input v-model="updateData.typeName" style="width: 250px;" :disabled="true">
                    </el-input>
                </el-form-item>

                <el-form-item label="具体职位:" prop="specificJob">
                    <el-input :disabled="true" v-model="updateData.jobName" style="width: 250px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="薪资范围选项:" prop="salaryRange">
                    <el-radio-group v-model="updateData.salaryRange" @change="rangeChangeHandle">
                        <el-radio :label="1">薪资范围</el-radio>
                        <el-radio :label="2">起始薪资</el-radio>
                        <el-radio :label="3">最高薪资</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="起始薪资:" prop="startSalary">
                    <el-input :disabled="updateData.salaryRange == 3" v-model="updateData.startSalary"
                        style="width: 250px;" placeholder="请输入起始薪资"></el-input>
                </el-form-item>

                <el-form-item label="最高薪资:" prop="maxSalary">
                    <el-input :disabled="updateData.salaryRange == 2" v-model="updateData.maxSalary"
                        style="width: 250px;" placeholder="请输入最高薪资"></el-input>
                </el-form-item>

                <el-form-item label="任职要求:" prop="skillRequest">
                    <el-input type="textarea" style="width: 250px;" v-model="updateData.skillRequest"
                        :autosize="{ minRows: 1 }" placeholder="请输入任职要求"></el-input>
                </el-form-item>

                <el-form-item label="职位详情:" prop="recruitDetail">
                    <el-input type="textarea" style="width: 250px;" v-model="updateData.recruitDetail"
                        :autosize="{ minRows: 1 }" placeholder="请输入职位详情"></el-input>
                </el-form-item>

                <el-form-item label="福利待遇:" prop="welfareInfo">
                    <el-input type="textarea" style="width: 250px;" v-model="updateData.welfareInfo"
                        :autosize="{ minRows: 1 }" placeholder="请输入福利待遇"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelupdateDataHandle">取 消</el-button>
                <el-button type="primary" @click="updateDataCheckHandle">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="身份验证" :visible.sync="identityCheckBox" center :show-close="false" width="25%">
            <el-form>
                <el-form-item label="密码:">
                    <el-input v-model="hrInfo.password" type="password" placeholder="请输入密码"
                        style="width: 240px;"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelDeleteHandle">取 消</el-button>
                <el-button type="primary" @click="identityCheckHandle">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import { hrInfoQuery, recruitListQuery, jobTypeQuery, specificJobQuery, addRecruitQuery, updateRecruitQuery, identityCheckQuery, deleteRecruitQuery } from '@/api/recruit'
export default {
    data() {
        return {
            dataLoading: true,
            payMethods: ["日结", "周结", "月结", "小时工", "面议"],
            hrInfo: {
                account: null,
                password: null,
                jobName: null,
                hrName: null,
                companyId: null,
                identity: null,
                pageNum: 1,
                pageSize: 5
            },
            recruitList: null,
            total: null,
            addRecruitBox: false,
            updateRecruitBox: false,
            identityCheckBox: false,
            formData: {
                hrId:this.$store.state.hrId,
                companyId: null,
                recruitName: null,
                jobType: null,
                jobId: null,
                payMethod: null,
                salaryRange: 1,
                startSalary: null,
                maxSalary: null,
                skillRequest: null,
                recruitDetail: null,
                welfareInfo: null
            },
            updateData: {
                recruitName: null,
                typeName: null,
                jobName: null,
                payMethod: null,
                salaryRange: null,
                startSalary: null,
                maxSalary: null,
                skillRequest: null,
                recruitDetail: null,
                welfareInfo: null
            },
            deleteRecruitId: null,
            jobList: null,
            jobTypeList: null,
            identityStatus: false
        }
    },
    methods: {
        //查询hr是否已经通过了企业资质审核
        async hrInfoQueryHandle() {
            const res = await hrInfoQuery(this.hrInfo.hrId)
            if (res.code == 500) {
                this.$router.push("/main")
            } else {
                this.hrInfo.companyId = res.data.companyId
                this.formData.companyId = res.data.companyId
                this.hrInfo.identity = res.data.identity

            }

        },
        //查询招聘信息
        recruitListQueryHandle() {
            recruitListQuery(this.hrInfo).then(res => {
                this.recruitList = res.data.list
                this.total = res.data.total
                this.dataLoading = false
            })
        },
        openAddBoxHandle() {
            this.addRecruitBox = true
            this.jobTypeQueryHandle()
        },
        //获取职位类型
        jobTypeQueryHandle() {
            jobTypeQuery().then(res => {
                this.jobTypeList = res.data
            })
        },
        //调整每页几条
        handleSizeChange(val) {
            this.hrInfo.pageSize = val
            this.recruitListQueryHandle()
        },
        //调整第几页
        handleCurrentChange(val) {
            this.hrInfo.pageNum = val
            this.recruitListQueryHandle()
        },
        //重置查询条件
        resetQueryHandle() {
            this.hrInfo.jobName = null
            this.hrInfo.username = null
            this.hrInfo.pageNum = 1
            this.recruitListQueryHandle()
        },
        //根据选择的职位类型，查询职位类型下具体的职位
        specificJobQueryHandle() {
            this.formData.specificJob = null
            specificJobQuery(this.formData.jobType).then(res => {
                this.jobList = res.data
            })

        },
        //修改薪资范围选择回调
        salaryRangeChangeHandle() {
            if (this.formData.salaryRange == 3) {
                this.formData.startSalary = null
            }
            if (this.formData.salaryRange == 2) {
                this.formData.maxSalary = null
            }
        },
        //表单验证
        checkFormDataHandle() {
            if (!this.formData.recruitName) {
                this.$message.error("请输入职位名称！")
            } else if (!this.formData.jobType) {
                this.$message.error("请选择职位类别！")
            } else if (!this.formData.jobId) {
                this.$message.error("请选择具体职位！")
            } else if (this.formData.payMethod == null && this.formData.payMethod == '') {
                this.$message.error("请选择薪资结算方式！")
            } else if (this.formData.salaryRange != 3 && !this.formData.startSalary) {
                this.$message.error("请输入起始薪资！")
            } else if (this.formData.salaryRange != 2 && !this.formData.maxSalary) {
                this.$message.error("请输入最高薪资！")
            } else if (!this.formData.skillRequest) {
                this.$message.error("请输入任职要求！")
            } else if (!this.formData.recruitDetail) {
                this.$message.error("请输入职位详情！")
            } else if (!this.formData.welfareInfo) {
                this.$message.error("请输入福利待遇！")
            } else {
                this.addRecruitHandle()
            }
        },
        //重置表单信息
        resetFormDataHandle() {
            this.formData.recruitName = null
            this.formData.jobType = null
            this.formData.specificJob = null
            this.formData.payMethod = null
            this.formData.salaryRange = 1
            this.formData.startSalary = null
            this.formData.maxSalary = null
            this.formData.skillRequest = null
            this.formData.recruitDetail = null
            this.formData.welfareInfo = null
        },
        //发布职位弹窗中重置按钮
        checkResetHandle() {
            this.$confirm("是否重置招聘信息？", {
                confirmButtonText: "确定重置",
                cancelButtonText: "取消重置"
            }).then(() => {
                this.resetFormDataHandle()
                this.$message.success("重置成功！")
            }).catch(() => { })
        },
        //发布招聘信息
        addRecruitHandle() {
            this.$confirm("是否发布招聘信息？", {
                confirmButtonText: "确定发布",
                cancelButtonText: "取消发布"
            }).then(() => {
                addRecruitQuery(this.formData).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.data)
                        this.addRecruitBox = false
                    }
                })
            }).catch(() => { })
        },
        //取消发布招聘
        cancelAddHandle() {
            this.$confirm("当前内容未保存，是否退出？", {
                confirmButtonText: "退出",
                cancelButtonText: "取消"
            }).then(() => {
                this.resetFormDataHandle()
                this.addRecruitBox = false
                this.$message.success("招聘信息已取消发布！")
            }).catch(() => { })
        },
        //身份验证
        identityCheckHandle() {
            if (!this.hrInfo.password) {
                this.$message.error("密码不能为空！")
                return
            }
            identityCheckQuery(this.hrInfo).then(res => {
                this.identityCheckBox = false
                if (res.code == 200) {
                    this.identityStatus = true
                    this.$message.success("身份认证成功！")
                }
                this.cleanHrInfo()
            })
        },
        //修改招聘信息弹窗
        openUpdateBoxHandle(row) {
            if (!this.identityStatus) {
                this.identityCheckBox = true
            } else {
                this.updateData.recruitId = row.recruitId
                this.updateData.recruitName = row.recruitName
                this.updateData.typeName = row.jobTypeDO.typeName
                this.updateData.jobName = row.jobDO.jobName
                this.updateData.payMethod = row.payMethod
                this.updateData.startSalary = row.startSalary
                this.updateData.maxSalary = row.maxSalary
                if (row.startSalary != null && row.maxSalary != null) {
                    this.updateData.salaryRange = 1
                } else if (row.startSalary != null && row.maxSalary == null) {
                    this.updateData.salaryRange = 2
                } else if (row.startSalary == null && row.maxSalary != null) {
                    this.updateData.salaryRange = 3
                }
                this.updateData.skillRequest = row.skillRequest
                this.updateData.recruitDetail = row.recruitDetail
                this.updateData.welfareInfo = row.welfareInfo
                this.updateRecruitBox = true
            }

        },
        //修改招聘信息弹窗,修改薪资范围
        rangeChangeHandle() {
            if (this.updateData.salaryRange == 3) {
                this.updateData.startSalary = null
            }
            if (this.updateData.salaryRange == 2) {
                this.updateData.maxSalary = null
            }
        },
        updateDataCheckHandle() {
            if (!this.updateData.recruitName) {
                this.$message.error("请输入职位名称！")
            } else if (this.updateData.payMethod == null && this.updateData.payMethod == '') {
                this.$message.error("请选择薪资结算方式！")
            } else if (this.updateData.salaryRange != 3 && !this.updateData.startSalary) {
                this.$message.error("请输入起始薪资！")
            } else if (this.updateData.salaryRange != 2 && !this.updateData.maxSalary) {
                this.$message.error("请输入最高薪资！")
            } else if (!this.updateData.skillRequest) {
                this.$message.error("请输入任职要求！")
            } else if (!this.updateData.recruitDetail) {
                this.$message.error("请输入职位详情！")
            } else if (!this.updateData.welfareInfo) {
                this.$message.error("请输入福利待遇！")
            } else {
                this.updateRecruitHandle()
            }
        },
        //修改招聘信息
        updateRecruitHandle() {
            this.$confirm("是否修改招聘信息？", {
                confirmButtonText: "确定",
                cancelButtonText: "取消"
            }).then(() => {
                updateRecruitQuery(this.updateData).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.data)
                        this.updateRecruitBox = false
                        this.recruitListQueryHandle()
                    }
                })
            }).catch(() => { })

        },
        //取消修改招聘信息
        cancelupdateDataHandle() {
            this.$confirm("是否取消修改？", {
                confirmButtonText: "确定",
                cancelButtonText: "取消"
            }).then(() => {
                this.updateRecruitBox = false
                this.$message.success("招聘信息修改已取消！")
            }).catch(() => { })
        },
        //删除招聘信息
        deleteRecruit(row) {
            if (!this.identityStatus) {
                this.identityCheckBox = true
            } else {
                this.$confirm("是否删除招聘信息？该操作不可逆！", {
                    confirmButtonText: "删除",
                    cancelButtonText: "取消"
                }).then(() => {
                    this.deleteRecruitId = row.recruitId
                    this.confirmDeleteHandle()
                }).catch(() => { })
            }
        },
        //清除人事账号密码
        cleanHrInfo() {
            this.hrInfo.password = null
        },
        //确定删除
        confirmDeleteHandle() {
            deleteRecruitQuery(this.deleteRecruitId).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.data)
                    this.recruitListQueryHandle()
                }
            })

        },
        //取消删除
        cancelDeleteHandle() {
            this.cleanHrInfo()
            this.identityCheckBox = false
        }



    },
    created() {
        this.hrInfoQueryHandle().then(() => {
            if (this.hrInfo.companyId != null) {
                this.recruitListQueryHandle()
            }
        })
    },
}
</script>

<style scoped>
.recruit-body {
    text-align: center;
}

.form-box {
    display: inline-block;
    width: 80vw;
}

.table-box {
    margin-top: 20px;
    height: 350px;
    text-align: center;
    overflow-y: auto;

}

.page-box {
    margin-top: 50px;
}

.el-form-item {
    margin-left: 10px;
}

.el-radio {
    margin-left: 20px;
}
</style>